<template>
  <el-dialog
    :model-value="dialogVisibles"
    :title="dialogTitles"
    width="60%"
    @close="handleClose"
  >

    <el-row class="header">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="checkin.name" label="车主姓名" />
        <el-table-column prop="checkin.phone" label="车主手机号" />
        <el-table-column prop="checkin.type" label="保养/维修">
          <template #default="{ row }">
            <el-tag type="warning" effect="dark" v-if="row.checkin.type=='1'">维修</el-tag>
            <el-tag type="success" effect="dark" v-if="row.checkin.type=='2'">保养</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="maintain.name" label="项目"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" :formatter="formatTime"></el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button type="success" :icon="Edit" v-if="row.maintainRecord.signStatus==2" @click="handleEdit(row)">用户签字</el-button>
            <el-button disabled type="info" :icon="Edit" v-if="row.maintainRecord.signStatus==1">用户已签字</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
        </span>
    </template>
    <Appointment v-model="appointmentVisible"
                 :appointmentTitle="appointmentTitle"
                 v-if="appointmentVisible"
                 :appointmentRowValue="appointmentRowValue" />
  </el-dialog>
</template>

<script setup>
import { defineEmits, ref, defineProps, watch, onMounted } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import { lists } from '../../../api/maintainDetail'
import { modify } from '../../../api/maintainRecord'
import { save } from '../../../api/workorder'
import { saveAdd } from '../../../api/material'
import { ElMessage } from 'element-plus'
// import Appointment from './appointment'

const form = ref({
  id: '',
  maintainRecordId: '',
  maintainId: '',
  signStatus: ''
})

const forms = ref({
  id: '',
  recordId: '',
  accessoriesId: '',
  materialCount: '1',
  createTime: ''
})

const formWork = ref({
  recordId: '',
  accessoriesId: ''
})

const tableData = ref([])
const total = ref(0)
const appointmentVisible = ref(false)
const appointmentTitle = ref('')
const appointmentRowValue = ref({})

async function query() {
  const resp = await lists(form.value.id)
  tableData.value = resp.data.data.list
  total.value = resp.data.data.total
}

onMounted(() => {
  query()
})

async function handleEdit() {
  // console.log(form.value.signStatus)
  form.value.signStatus = 1
  formWork.value.recordId = form.value.id
  forms.value.recordId = form.value.id
  forms.value.accessoriesId = form.value.checkin.id
  await saveAdd(forms.value) // 生成物料清单
  await save(formWork.value) // 生成工单信息
  await modify(form.value) // 用户签字
  console.log(forms.value)
  ElMessage({
    message: '用户签字成功，工单信息和物料清单已经自动生成！！',
    type: 'success'
  })
  // 上层组件重新获取数据
  emits('query')
  handleClose()
}

const props = defineProps({
  // 标题
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  // 编辑行数据
  dialogRowValue: {
    type: Object,
    default: () => {}
  }
})
// 监听props.dialogRowValues值改变
watch(
  () => props.dialogRowValue,
  () => {
    form.value = props.dialogRowValue
  },
  { deep: true, immediate: true }
)

// 修改其他属性的值
const emits = defineEmits(['update:modelValue', 'query'])
// 关闭
function handleClose() {
  emits('update:modelValue', false)
}

// 时间转换
function formatTime(row, column) {
  const date = new Date(row[column.property])
  const year = date.getFullYear()
  let month = date.getMonth() + 1
  if (month < 10) {
    month = '0' + month
  }
  let day = date.getDate()
  if (day < 10) {
    day = '0' + day
  }
  return year + '-' + month + '-' + day
}
</script>

<style class="scss" scoped>
::v-deep .el-input__prefix-inner {
  align-items: center;
}
</style>
